<template>
  <div class="home">
    <Header head-title="挂号详情" go-back="true"></Header>
    <section class="group Select RecoDetail" @click="Doctor()">
        <div class="Select">
            <img class="Doctor" src="../../../assets/img/Touxiang.png" alt="">
            <div class="SelectS">
                <h3 class="fonts">刘艳晓 <span class="fonsMiddle fontC6">主治医师</span> </h3>
                <p class="fonsMiddle">平顶山市第一人民医院</p>
            </div>
        </div>
        <div class="arrow">
            <img src="../../../assets/img/arrow.png" alt="">
        </div>
    </section>

    <section class="group">
        <div class="Select RecordDetail">
            <section>
                <div class="Select fonts RecordInfo">
                    <p class="fontC6">就诊医院：</p>
                    <p>平顶山市第一人民医院</p>
                </div>
                <div class="Select fonts RecordInfo">
                    <p class="fontC6">科室医生：</p>
                    <p>刘艳晓 - 内分泌代谢科</p>
                </div>
                <div class="Select fonts RecordInfo">
                    <p class="fontC6">门诊时间：</p>
                    <p>2020-02-20 周四 上午</p>
                </div>
                <div class="Select fonts RecordInfo">
                    <p class="fontC6">门诊类型：</p>
                    <p>专家门诊</p>
                </div>
                <div class="Select fonts RecordInfo">
                    <p class="fontC6">挂号费用：</p>
                    <p>12.01元</p>
                </div>
            </section>
            <section class="recordRight fonts">
                <div class="recoBg1 RecordCircle fontCfff">
                    未取号
                </div>
            </section>
        </div>
        <p class="fonsMiddle fontCO">挂号费用由医院自行设定，平台不收取任何额外费用</p>
    </section>

    <section class="group fonts">
        <h3 class="HomeH">就诊人信息</h3>
        <div class="Select Reserva">
            <p>就诊人姓名：</p>
            <p>陈圆圆</p>
        </div>
        <div class="Select Reserva">
            <p>预约时间段：</p>
            <p>08:30-11:30</p>
        </div>
        <div class="Select Reserva">
            <p>初诊/复诊：</p>
            <p>初诊</p>
        </div>
        <div class="Reserva SeserMS">
        <p class="fonts">症状描述：</p>
        <textarea class="SerTexa" name="" id="" cols="30" rows="10"></textarea>
      </div>
    </section>

    <section class="cover" v-if="Supple"></section>
    <section class="supple borderR" v-if="Supple">
        <h3 class="fonts HomeH">补充诉求</h3>
        <textarea class="SerTexa" name="" id="" placeholder="语音或文字描述症状信息，便于大夫提前了解您的症状，达到更好的就诊目的" cols="30" rows="10"></textarea>
        <el-button type="primary" class="btn_right">确定</el-button>
        <el-button type="primary" @click="SuppleNone()">取消</el-button>
    </section>

    <section class="select">
        <el-button type="primary" @click="Sign()">签到排号</el-button>
        <el-button type="primary" @click="BackHome()">补充诉求</el-button>
        <el-button type="primary" @click="open()">取消预约</el-button>
    </section>
  </div>
</template>

<script>
import Header from '../../../components/Header'
export default {
  data () {
    return {
      Supple: false
    }
  },
  mounted () {
  },
  components: {
    Header
  },
  methods: {
    // 签到排号
    Sign () {
      this.$router.push({
        path: '/Sign'
      })
    },
    //  取消预约
    //  点击取消预约
    open () {
      this.$confirm('是否确定取消预约挂号', '取消预约', {
        confirmButtonText: '确定取消',
        cancelButtonText: '再想想',
        type: 'warning',
        customClass: 'Message'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '再想想'
        })
      })
    },
    Doctor () {
      this.$router.push({
        path: '/Doctor'
      })
    },
    //  补充诉求
    BackHome () {
      this.Supple = true
    },
    SuppleNone () {
      this.Supple = false
    }
  }
}
</script>

<style scoped>
.home {
  padding-top: 0.8rem;
  background: none;
}
.btn_right {
    margin-right: 1rem;
}
.supple {
  z-index: 901;
}
</style>
